<template>
	<div :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';

export default {
	props: {
		height:{
			type:String,
			default:'70px'
		},
		width:{
			type:String,
			default:'100%'
		},
		id:{
			type:String,
			default:'ec'
		},
		color:{
            type:Array,
            default:['#56f8ff', '#6cabff']
        }
	},
	data() {
		return {
			chart:{}
		};
	},
	watch:{
		data(){
			this.init()
		}
	},
	methods:{
		init(){
            this.chart = echarts.init(this.$el);

            let data = [{
                    name: '河北省',
                    value: (Math.random() * 10).toFixed(2),
                    sum: 10
                },
                {
                    name: '广东省',
                    value: (Math.random() * 10).toFixed(2),
                    sum: 10
                },
                {
                    name: '福建省',
                    value: (Math.random() * 10).toFixed(2),
                    sum: 10
                },
                {
                    name: '湖南省',
                    value: (Math.random() * 10).toFixed(2),
                    sum: 10
                },
                {
                    name: '江西省',
                    value: (Math.random() * 10).toFixed(2),
                    sum: 10
                },
            ];
            let getArrByKey = (data, k) => {
                let key = k || "value";
                let res = [];
                if (data) {
                    data.forEach(function(t) {
                        res.push(t[key]);
                    });
                }
                return res;
            };
            let opt = {
                index: 0
            }
            let color = ['#FC619D', '#FF904D', '#48BFE3'];
            data = data.sort((a, b) => {
                return b.value - a.value
            });

            let option = {
                grid: {
                    top: '5%',
                    bottom: '0',
                    right: '5%',
                    left: -50,
                    containLabel: true
                },
                xAxis: {
                    show: false
                },
                yAxis: [{
                    triggerEvent: true,
                    show: true,
                    inverse: true,
                    data: getArrByKey(data, 'name'),
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        color: '#fff',
                        align: 'left',
                        margin: 100,
                        fontSize: 18,
                        formatter: function(value, index) {
                            if (opt.index === 0 && index < 3) {
                                return '{idx' + index + '|' + (1 + index) + '} {title|' + value + '}'
                            } else if (opt.index !== 0 && (index + opt.index) < 9) {
                                return '{idx|0' + (1 + index + opt.index) + '} {title|' + value + '}'
                            } else {
                                return '{idx|' + (1 + index + opt.index) + '} {title|' + value + '}'
                            }
                        },
                        rich: {
                            idx0: {
                                color: '#FB375E',
                                backgroundColor: '#FFE8EC',
                                borderRadius: 100,
                                padding: [5, 8]
                            },
                            idx1: {
                                color: '#FF9023',
                                backgroundColor: '#FFEACF',
                                borderRadius: 100,
                                padding: [5, 8]
                            },
                            idx2: {
                                color: '#01B599',
                                backgroundColor: '#E1F7F3',
                                borderRadius: 100,
                                padding: [5, 8]
                            },
                            idx: {
                                color: '#1B9EFF',
                                backgroundColor: '#fff',
                                borderRadius: 100,
                                padding: [5, 8]
                            },
                            // title: {
                            //     width: 165
                            // }
                        }
                    },
                }, {
                    triggerEvent: true,
                    show: true,
                    inverse: true,
                    data: getArrByKey(data, 'name'),
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        color: '#fff',
                        align: 'left',
                        fontSize: 18,
                        formatter: function(value, index) {
                            return '注册人数：' + parseInt(data[index].value * 100) + '  占比：' + parseInt((data[index].value / data[index].sum * 100)) + '%'
                        },
                    }
                }],
                series: [{
                    name: '条',
                    type: 'bar',
                    yAxisIndex: 0,
                    data: data,
                    barWidth: 12,
                    itemStyle: {
                        color: (val) => {
                            if (val.dataIndex < 3 && opt.index === 0) {
                                return color[val.dataIndex];
                            } else {
                                return '#1990FF'
                            }
                        },
                        barBorderRadius: 24,
                    }
                }]
            };

            this.chart.setOption(option);

            let this_ = this;
            var index = 0 // 播放所在下标
            setInterval(() => {
                this_.chart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0, // 第几条series
                    dataIndex: index // 第几个tooltip
                })
                index++
                if (index > 6) {
                    index = 0
                }
            }, 1000)
		}
	},
	mounted() {
        setTimeout(() => {
			this.init()
		}, 20)
	},
};
</script>

<style scoped lang="less">
</style>
